<template>
  <div class="taskDetails-page">
    <FixedOperation>
      <div class="my-header">
        <h4 class="flex-header-7">
          <svg-icon
            :icon-class="'svg_tbfk'"
            class="w-30px h-30px align-middle"
            style="margin-right: 10px; margin-top: -2px"
          />
          <span>任务处理</span>
        </h4>
        <div class="flex-header-5">
          <span style="width: 88px"> </span>
          <el-button
            v-if="disposeFrom.directorId != userStore.user.userId"
            :disabled="isDisabled"
            round
            size="small"
            type="primary"
            plain
            @click="toWorkOrder('other')"
            >转他人处理</el-button
          >
          <el-button
            round
            size="small"
            type="primary"
            plain
            @click="toWorkOrder('back')"
            :disabled="isDisabled"
            v-if="
              disposeFrom.createBy != userStore.user.userId &&
              disposeFrom.directorId != userStore.user.userId
            "
            >退回任务</el-button
          >
          <el-button
            type="primary"
            plain
            :disabled="btnDisabled"
            round
            size="small"
            @click="toFinish"
          >
            结果反馈
          </el-button>
          <el-button
            type="primary"
            plain
            :disabled="btnDisabled"
            round
            size="small"
            @click="toRenewal"
          >
            更新进度
          </el-button>
          <el-button
            v-if="disposeFrom.directorId == userStore.user.userId"
            :disabled="isDisabled"
            round
            size="small"
            type="primary"
            plain
            @click="toWorkOrder('order')"
            >分派任务</el-button
          >

          <el-button round @click="handleBack" type="primary" plain
            >返回</el-button
          >
        </div>
      </div>
    </FixedOperation>
    <div class="taskDetails-com">
      <div class="taskDetails-border">
        <el-form
          :model="disposeFrom"
          label-width="110px"
          ref="ruleFormRef"
          style="margin-top: 18px"
        >
          <TitleName
            title="任务基本信息"
            icon="i-carbon-bookmark-filled"
            class="title text-#000 ml-20px"
          ></TitleName>
          <el-row :gutter="grid" class="px-20" style="margin-top: 16px">
            <el-col :span="12">
              <el-form-item label="任务标题：">
                <span>{{ disposeFrom.title }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务编码：">
                <span>{{ disposeFrom.taskNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务级别：">{{
                rsgl_urgent_status.find(
                  item => item.value == disposeFrom.impSign
                )
                  ? rsgl_urgent_status.find(
                      item => item.value == disposeFrom.impSign
                    ).label
                  : '--'
              }}</el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="任务类型：">
                <span style="margin-right: 20px">
                  {{
                    task_order_type.find(
                      item => item.value == disposeFrom.businessType
                    )
                      ? task_order_type.find(
                          item => item.value == disposeFrom.businessType
                        ).label
                      : '--'
                  }}</span
                >
                <!-- <span> ({{ disposeFrom.businessName }}) </span> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发起单位：">
                <span>{{ disposeFrom.fqdw }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发 起 人：">
                <span>{{ disposeFrom.fqr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="disposeFrom.warning">
              <el-form-item label="任务到期提醒：">
                <span>{{
                  reminder_opening.find(v => v.value == disposeFrom.warning)
                    .label
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <TitleName
            :title="`任务详细信息(${businessTitle})`"
            icon="i-carbon-bookmark-filled"
            class="title text-#000 ml-20px"
          ></TitleName>
          <el-row
            :gutter="grid"
            class="px-20"
            v-if="isBusinessName"
            style="margin-top: 16px"
          >
            <el-col :span="12">
              <el-form-item :label="associatedTitle" prop="businessId">
                <el-input
                  :value="disposeFrom.businessName"
                  style="width: 100%"
                  disabled
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="grid"
            class="px-20"
            style="margin-top: 16px"
            v-if="businessTitle == '上门服务'"
          >
            <el-col :span="12">
              <el-form-item label="客户名称：">
                <span>{{ disposeFrom.businessName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人/电话：">
                <span> {{ disposeFrom.contactTel }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上门地址：">
                <span> {{ disposeFrom.goAddr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户地址：">
                <span> {{ disposeFrom.cusAddr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="指派给：">
                <div class="circleUrl-img">
                  <div style="text-align: center">
                    <el-avatar :size="22" :src="circleUrl" />
                  </div>
                  <div style="font-size: 13px; color: #666">
                    {{ disposeFrom.director }}
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预计上门时间：">
                <span> {{ disposeFrom.visitTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="grid"
            class="px-20"
            style="margin-top: 16px"
            v-if="businessTitle == '测试问题' || businessTitle == '生产BUG'"
          >
            <el-col :span="12">
              <el-form-item label="严重程度：">
                <span>
                  {{
                    task_severity.find(
                      item => item.value == disposeFrom.severity
                    )
                      ? task_severity.find(
                          item => item.value == disposeFrom.severity
                        ).label
                      : '--'
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="问题分类：">
                <span>
                  {{
                    task_question_type.find(
                      item => item.value == disposeFrom.questionType
                    )
                      ? task_question_type.find(
                          item => item.value == disposeFrom.questionType
                        ).label
                      : '--'
                  }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="grid"
            class="px-20"
            v-if="businessTitle == '生产BUG'"
          >
            <el-col :span="12">
              <el-form-item label="影响范围：">
                <span>
                  {{
                    task_reach.find(item => item.value == disposeFrom.reach)
                      ? task_reach.find(item => item.value == disposeFrom.reach)
                          .label
                      : '--'
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="期望解决时间:">
                <span>{{ disposeFrom.endTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="grid" class="px-20" style="margin-top: 16px">
            <el-col :span="12" v-if="showProjectName">
              <el-form-item label="系统/项目名称">
                <span>
                  {{ disposeFrom.businessName }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="businessTitle === '功能需求'">
              <el-form-item label="期望完成时间:">
                <span>{{ disposeFrom.endTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="businessTitle === '功能需求'">
              <el-form-item label="开始时间：">
                <span>{{ disposeFrom.startTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="businessTitle === '功能需求'">
              <el-form-item label="预估工时：">
                <span v-if="disposeFrom.preWorkHour"
                  >{{ disposeFrom.preWorkHour }} 小时</span
                >
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="businessTitle == '数据统计' || businessTitle == '美工设计'"
            >
              <el-form-item label="期望完成时间:">
                <span>{{ disposeFrom.endTime }} </span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="grid" class="px-20" style="margin-top: 16px">
            <el-col :span="24">
              <el-form-item :label="taskDescription">
                <div class="w-100% editorHtmlSty">
                  <div v-html="disposeFrom.remark"></div>
                </div>
                <!-- <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入任务描述"
                  v-model.trim="disposeFrom.remark"
                  maxlength="300"
                  disabled
                  show-word-limit
                >
                </el-input> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="grid" class="px-20">
            <el-col :span="24">
              <el-form-item label="上传附件：">
                <span
                  v-for="item in disposeFrom.filePath"
                  :key="item"
                  style="color: #1890ff; cursor: pointer"
                >
                  <span @click="handleDownload(item.url)">
                    《{{ item.origFileName }}》
                  </span>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="grid" class="px-20">
            <el-col :span="12" v-if="isSite">
              <el-form-item label="开始时间：">
                <span>{{ disposeFrom.startTime }} </span>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="isSite">
              <el-form-item label="期望完成时间：">
                <span>{{ disposeFrom.endTime }} </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="grid" class="px-20" style="margin-top: 16px">
            <el-col :span="12">
              <el-form-item label="任务负责人：">
                <div class="circleUrl-img">
                  <div style="text-align: center">
                    <el-avatar :size="22" :src="circleUrl" />
                  </div>
                  <div style="font-size: 13px; color: #666">
                    {{ disposeFrom.director }}
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参与人员：">
                <div
                  v-for="item in circleUrlList"
                  :key="size"
                  class="circleUrl-box"
                >
                  <div class="circleUrl-img">
                    <div>
                      <el-avatar :size="22" :src="item.img" />
                    </div>
                    <div>{{ item.title }}</div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <TitleName
            title="任务完成情况"
            icon="i-carbon-bookmark-filled"
            class="title text-#000 ml-20px"
          ></TitleName>
          <el-row :gutter="grid" class="px-20" style="margin-top: 24px">
            <el-col :span="24">
              <el-form-item label="完成进度：">
                <span>
                  {{ disposeFrom.schedule ? disposeFrom.schedule : '' }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="完成情况说明：">
                <span>
                  {{
                    disposeFrom.scheduleRemark ? disposeFrom.scheduleRemark : ''
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附 件：">
                <span
                  v-for="item in disposeFrom.scheduleFilePath"
                  :key="item"
                  style="color: #1890ff; cursor: pointer"
                >
                  <span @click="handleDownload(item.scheduleFilePath)">
                    《{{ item.scheduleFileName }}》
                  </span>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div class="border-bottom-title">
          <span style="float: left">
            <el-icon :size="22" color="#409EFC"><ChatLineSquare /></el-icon>
          </span>
          <div>操作记录</div>
        </div>

        <div class="annex-box">
          <Bubble
            v-for="item in disposeFrom.operateList"
            :data="item"
            :key="item.name"
          ></Bubble>
        </div>
        <div class="border-bottom-title">
          <span style="float: left">
            <el-icon :size="22" color="#409EFC"><ChatLineSquare /></el-icon>
          </span>
          <div>结果反馈</div>
        </div>
        <div class="annex-box">
          <Bubble
            v-for="item in disposeFrom.operateFkList"
            :data="item"
            :key="item.name"
            @getTaskDetails="getTaskDetails"
          ></Bubble>
        </div>
      </div>
      <!-- 结果反馈 -->
      <finishForm
        v-if="isFinish"
        :dialogParam="dialogParam"
        @close="handleClose"
        :rowId="rowId"
      ></finishForm>
      <!-- 分配工单 -->
      <workForm
        v-if="isWork"
        :workFrom="workFrom"
        @closeForm="handleClose"
      ></workForm>
      <!-- 退回任务 -->
      <backForm
        v-if="isBack"
        :workFrom="workFrom"
        @closeForm="handleClose"
      ></backForm>
      <!-- 转他人处理 -->
      <transferForm
        v-if="isTransfer"
        :workFrom="workFrom"
        @closeForm="handleClose"
      ></transferForm>
      <!-- 更新进度 -->
      <progressForm
        v-if="isProgress"
        :dialogParam="dialogParam"
        @closeForm="handleClose"
        @toFinish="toFinish"
      ></progressForm>
    </div>
  </div>
</template>
<script setup name="taskDetails">
import {
  getTaskDetail,
  getTaskDeal,
  delTaskFileList
} from '@/api/taskManage/task'

import { uploadFile, delFile } from '@/api/salesManage/contractManage'
import useUserStore from '@/store/modules/user'
import finishForm from '../modules/finish.vue'
import workForm from '../modules/work.vue'
import backForm from '../modules/back.vue'
import transferForm from '../modules/transfer.vue'
import progressForm from '../modules/progress.vue'
import recoverForm from '../modules/recover.vue'

import useTagsViewStore from '@/store/modules/tagsView'
import { reactive, getCurrentInstance, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import headaImage from '@/assets/images/icon/principal.png'
import Bubble from '../taskDetails/Bubble.vue'
import { ElMessageBox } from 'element-plus'

const { proxy } = getCurrentInstance()

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const data = reactive({
  operateId: null,
  dialogParam: {
    isVisible: true
  },
  disposeFrom: {}, //详情
  operateList: [], //操作记录
  workFrom: {},
  //   isFinish: false,
  isBack: false,
  circleUrl: headaImage,
  circleUrlList: [], //参与人
  revocationFrom: {} //撤销
})
const {
  circleUrl,
  circleUrlList,
  dialogParam,
  workFrom,
  disposeFrom,
  operateList,
  operateId,
  isBack,
  revocationFrom //撤销
} = toRefs(data)

const {
  task_reminder_time, //任务提醒
  rsgl_urgent_status, //紧要程度
  sys_imp_sign, //重要程度
  task_severity, //严重程度
  system_or_project_name, //系统/项目名称
  task_question_type, //问题分类
  rsgl_question_type, //问题类型
  task_order_type, //任务类型
  work_order_level, //任务级别
  task_reach, //影响范围
  reminder_opening
} = proxy.useDict(
  'task_reminder_time',
  'rsgl_urgent_status',
  'sys_imp_sign',
  'task_severity',
  'system_or_project_name',
  'task_question_type',
  'rsgl_question_type',
  'task_order_type',
  'work_order_level',
  'task_reach',
  'reminder_opening'
)
const isFinish = ref(false) // 显隐
const isWork = ref(false)
const isTransfer = ref(false)
const isDisabled = ref(false)
const btnDisabled = ref(false)
const isProgress = ref(false)

//初始化
const rowId = ref()
async function init() {
  console.log('query======', route.query)
  console.log(' userId======3333', userStore.user.userId)
  operateId.value = route.query.operateId
  rowId.value = route.query.rowId ? route.query.rowId : ''
  await getTaskDetails()
}
init()
//获取详情
function getTaskDetails(needDialog = false) {
  getTaskDetail({ id: route.query.id, operateId: route.query.operateId }).then(
    res => {
      disposeFrom.value = res.data
      disposeFrom.value.reminderMethod = res.data.reminderMethod
        ? res.data.reminderMethod.split(',')
        : ''
      operateList.value = res.data.operateList //操作记录
      changeType(disposeFrom.value.businessType)
      if (res.data.currentDealStatus == '5') {
        btnDisabled.value = true
      }
      if (
        (res.data.currentDealStatus == '0' ||
          res.data.currentDealStatus == '3') &&
        res.data.status === '1'
      ) {
        isDisabled.value = false
        console.log('isDisabled===', isDisabled.value)
      } else {
        isDisabled.value = true
      }

      let newArr = []
      let newFileArr = []
      circleUrlList.value = []
      let array = res.data.players ? res.data.players.split(',') : ''
      let filePathList = res.data.filePath ? res.data.filePath.split(',') : ''
      let fileNameList = res.data.fileName ? res.data.fileName.split(',') : ''
      let scheduleFilePathList = res.data.scheduleFilePath
        ? res.data.scheduleFilePath.split(',')
        : ''
      let scheduleFileNameList = res.data.scheduleFileName
        ? res.data.scheduleFileName.split(',')
        : ''

      for (let i = 0; i < array.length; i++) {
        circleUrlList.value.push({
          img: headaImage,
          title: array[i]
        })
      }
      if (res.data.filePath) {
        filePathList.map(item => {
          newArr.push({
            url: item,
            origFileName: ''
          })
        })
        fileNameList.map((item, i) => {
          if (newArr[i]) {
            newArr[i].origFileName = item
          }
        })
      }
      if (res.data.scheduleFilePath) {
        scheduleFilePathList.map(item => {
          newFileArr.push({
            scheduleFilePath: item,
            scheduleFileName: ''
          })
        })
        scheduleFileNameList.map((item, i) => {
          if (newFileArr[i]) {
            newFileArr[i].scheduleFileName = item
          }
        })
      }
      disposeFrom.value.filePath = newArr
      disposeFrom.value.scheduleFilePath = newFileArr

      // 更新进度100% 后自动弹出结果反馈弹出
      if (
        needDialog &&
        disposeFrom.value.schedule &&
        disposeFrom.value.schedule === '100%'
      ) {
        proxy.$nextTick(() => {
          toFinish()
        })
      }
    }
  )
}
//任务类型
// const businessOptions = computed(() => arrayToTree(ref(task_order_type).value)) // 工单类型树结构
// 显示系统/项目名称
// 判断是否显示--系统/项目名称:
const devType = ['功能需求', '测试问题', '生产BUG', '数据统计', '美工设计']
const showProjectName = computed(() => {
  return devType.find(v => v === businessTitle.value)
})
const businessTitle = ref('普通工单')
const taskDescription = ref('任务描述')
const isSite = ref(false)
const isBusinessName = ref(false)
const associatedTitle = ref('')
function changeType(val) {
  console.log('任务类型==', val)
  const findVal = ref(task_order_type).value.find(v => v.value === val)

  console.log('findVal===', findVal.label)
  businessTitle.value = findVal.label
  if (businessTitle.value == '客户跟进') {
    isBusinessName.value = true
    isSite.value = true
    taskDescription.value = '任务描述'
    associatedTitle.value = '关联客户：'
  } else if (businessTitle.value == '订单跟进') {
    isBusinessName.value = true
    isSite.value = true
    taskDescription.value = '任务描述'
    associatedTitle.value = '关联订单：'
  } else if (businessTitle.value == '采购订单') {
    isBusinessName.value = true
    isSite.value = true
    taskDescription.value = '任务描述'
    associatedTitle.value = '关联订单：'
  } else if (businessTitle.value == '内部订单') {
    isBusinessName.value = true
    isSite.value = true
    taskDescription.value = '任务描述'
    associatedTitle.value = '关联订单：'
  } else if (businessTitle.value == '商机跟进') {
    isBusinessName.value = true
    isSite.value = true
    taskDescription.value = '任务描述'
    associatedTitle.value = '关联商机：'
  } else if (businessTitle.value == '项目') {
    isBusinessName.value = true
    isSite.value = true
    associatedTitle.value = '关联项目：'
    taskDescription.value = '任务描述'
  } else if (businessTitle.value == '联系人') {
    isBusinessName.value = true
    isSite.value = true
    associatedTitle.value = '关联客户：'
    taskDescription.value = '任务描述'
  } else if (businessTitle.value == '上门服务') {
    isBusinessName.value = true
    associatedTitle.value = '电话服务单：'
    isSite.value = false
    taskDescription.value = '任务描述'
  } else if (businessTitle.value == '测试问题') {
    isBusinessName.value = false
    isSite.value = true
    console.log('isSite==', isSite.value)
    taskDescription.value = '测试问题描述'
  } else if (businessTitle.value == '功能需求') {
    isBusinessName.value = false
    isSite.value = false
    taskDescription.value = '功能需求内容'
  } else if (businessTitle.value == '生产BUG') {
    isBusinessName.value = true
    isSite.value = false
    taskDescription.value = 'BUG描述'
  } else if (businessTitle.value == '数据统计') {
    isBusinessName.value = false
    isSite.value = false
    taskDescription.value = '统计内容描述'
  } else if (businessTitle.value == '美工设计') {
    isBusinessName.value = false
    isSite.value = false
    taskDescription.value = '设计内容描述'
  } else {
    isBusinessName.value = false
    isSite.value = true
    taskDescription.value = '任务描述'
  }
  console.log('businessTitle---', businessTitle.value)
}
//操作按钮事情 下载文件
const handleDownload = row => {
  const path = row
  window.open(path, '_blank')
}

//返回
function handleBack() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
}
//完结任务关闭
function handleClose(item, schedule) {
  isFinish.value = false
  isWork.value = false
  isBack.value = false
  isTransfer.value = false
  isProgress.value = false
  if (item) {
    getTaskDetails('toFinish')
  }
  console.log('item=====', item)
}
//完结任务
function toFinish() {
  if (disposeFrom.value.schedule == '100%') {
    isFinish.value = true
    dialogParam.value.operateId = route.query.operateId
    dialogParam.value.taskId = disposeFrom.value.id
    dialogParam.value.titleName = disposeFrom.value.title
    dialogParam.value.impSign = disposeFrom.value.impSign
    dialogParam.value.businessType = disposeFrom.value.businessType
    dialogParam.value.directorId = disposeFrom.value.directorId
    dialogParam.value.playersId = disposeFrom.value.playersId
  } else {
    ElMessageBox.alert('请先更新进度至100%', '提示', {
      confirmButtonText: '关闭'
    })
  }
}
//更新任务
function toRenewal() {
  console.log('gengxin===', dialogParam.value)
  isProgress.value = true
  dialogParam.value.operateId = route.query.operateId
  dialogParam.value.taskId = disposeFrom.value.id
}

//撤销任务
function revocationItem() {
  revocationFrom.value.isVisible = true
  revocationFrom.value.taskId = disposeFrom.value.id
  console.log('revocationFrom', revocationFrom.value)
}
//分配工单
const toWorkOrder = type => {
  switch (type) {
    case 'order': //分配工单
      isWork.value = true
      workFrom.value = {
        title: '分配任务',
        operateId: operateId.value,
        taskId: disposeFrom.value.id,
        titleName: disposeFrom.value.title,
        impSign: disposeFrom.value.impSign,
        remark: disposeFrom.value.remark
      }
      break
    case 'back': //退回
      isBack.value = true
      workFrom.value = {
        title: '退回任务',
        operateId: operateId.value,
        createBy: disposeFrom.value.parentOperateId,
        createName: disposeFrom.value.parentOperateName,
        taskId: disposeFrom.value.id,
        titleName: disposeFrom.value.title,
        impSign: disposeFrom.value.impSign,
        remark: disposeFrom.value.remark
      }
      revocationItem()

      break
    case 'other': //转他人处理
      isTransfer.value = true
      workFrom.value = {
        title: '转他人处理',
        operateId: operateId.value,
        taskId: disposeFrom.value.id,
        titleName: disposeFrom.value.title,
        impSign: disposeFrom.value.impSign,
        remark: disposeFrom.value.remark
      }
      break
  }
}
</script>

<style lang="scss" scoped>
.taskDetails-page {
  display: block;
  :deep(.el-table__expand-icon > .el-icon) {
    font-size: 12px;
    display: none;
  }
  .taskDetails-com {
    padding: 24px;

    .taskDetails-border {
      width: 100%;
      padding: 24px;
      border: 1px solid #eee;
      border-radius: 5px;
    }
  }
  .my-header {
    display: flex;
    height: 36px;
    .flex-header-7 {
      flex: 7;
      font-size: 18px;
      font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
      font-weight: bold;
      margin-top: 8px;
    }
    .flex-header-5 {
      flex: 5;
      margin-top: 2px;
      min-width: 500px;
      text-align: right;
    }
  }
  .el-button--small.is-round {
    padding: 15px 11px;
  }
  .dispose-title {
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  }
  .jx-color {
    color: #f59a23;
  }
  .wc-color {
    color: #4bd863;
  }
  .circleUrl-box {
    display: inline-block;
    .circleUrl-img {
      float: left;
      margin: 0 6px;
      //   width: 90px;
      text-align: center;
    }
  }
  .border-bottom-title {
    margin: 16px 0 0 0;
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 15px;
    background: white;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #666;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  }
  .border-bottom-title span {
    float: left;
    padding: 10px 0 0 10px;
  }
  .border-bottom-title div {
    float: left;
    padding-left: 3px;
  }
  .annex-box {
    padding: 0px 10px 10px 10px;
    // border: 1px solid #eee;
    :deep(.el-table__header-wrapper) {
      display: none;
    }
    .annex-flex {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border: 1px solid #eee;
      padding: 12px 18px;
      line-height: 40px;
      margin-top: 18px;
      .annex-flex-6 {
        flex: 11;
        font-size: 14px;
      }
      .annex-flex-1 {
        // flex: 1;
        display: inline-block;
        width: 30px;
      }
      .annex-flex-12 {
        flex: 15;
        font-size: 14px;
      }
      .annex-flex-4 {
        flex: 4;
      }
      .annex-flex-3 {
        flex: 3;
      }
      .annex-flex-2 {
        flex: 2;
      }
      .annex-title {
        color: #409efc;
      }
    }
  }
  .editorHtmlSty {
    div {
      height: 400px;
      overflow-y: auto;
      border: 1px solid #d1d5db;
      padding: 0 12px;
      scrollbar-width: none; //兼容火狐
      -ms-overflow-style: none; //兼容IE10+
      &::-webkit-scrollbar {
        display: none; // 使用伪类选择器 ::-webkit-scrollbar ,兼容chrome和safari浏览器
      }
      p {
        @apply m-0 p-0;
        img {
          // @apply w-100%;
        }
      }
    }
  }
}
</style>
